// 音视频聊天室，webim支持游客（不登录）接收该群组类型消息，初始化后joinGroup即可
<template>
  <div class="avchatroom-item">
    <el-container class="avchatroom-item-wrapper">
      <el-main class="video-wrapper">
        <div class="videocall-tips" v-if="videoCallUserList.length === 0">
          <span>暂无人上麦</span>
        </div>
        <!-- 当前用户没有上行，并且上行总用户数少于9时，显示上麦按钮 -->
        <div class="publish-button" v-if="!isPublish && videoCallUserList.length < 9">
            <el-button 
              @click="publish"
              title="我要上麦！" 
              icon="el-icon-phone-outline" 
              circle>
            </el-button>
          </div>
        <div :id="userID" :class="videoClass" :title="userID" v-for="userID in videoCallUserList" :key="userID">
          <span class="video-userid">{{ userID }}</span>
          <div v-if="userID === 'local'" class="video-buttons">
            <el-button 
              @click="micHandler"
              :title="isMicOn ? '静音' : '开启声音'" 
              :icon="isMicOn ? 'el-icon-microphone': 'el-icon-turn-off-microphone'"
              circle>
            </el-button>
            <el-button 
              class="close-button" 
              @click="closeHandler"
              title="下麦" 
              type="danger"
              icon="el-icon-phone" 
              circle>
            </el-button>
            <el-button 
              @click="camHandler"
              :title="isCamOn ? '关闭摄像头' : '打开摄像头'" 
              :icon="isCamOn ? 'el-icon-video-camera-solid' : 'el-icon-video-camera'" 
              circle>
            </el-button>
          </div>
        </div>
      </el-main>
      <el-aside class="chat-wrapper" width="360px">
        <div class="chat-title">
          {{ currentConversation.groupProfile.name }}
        </div>
        <div class="chat-content">
          <MessageItem v-for="message in currentMessageList" :key="message.ID" :message="message"/>
        </div>
        <div class="chat-send-box" v-if="isLogin">
          <MessageSendBox />
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MessageItem from '../message/MessageItem.vue';
import MessageSendBox from '../message/MessageSendBox.vue';
import RtcClient from '../../utils/rtcClient';

export default {
  data(){
    return {
      isJoin: false,
      isPublish: false,
      isMicOn: false,
      isCamOn: false
    }
  },
  mounted(){
    this.initTrtc();
  },
  beforeDestroy(){
    if(this.isJoin){
      this.Trtc.leave();
      this.$store.commit('resetVideoCallUserList');
    }
  },
  components:{
    MessageItem,
    MessageSendBox
  },
  computed:{
    ...mapState({
      currentMessageList: state => state.conversation.currentMessageList,
      currentConversation: state => state.conversation.currentConversation,
      videoCallUserList: state => state.videocall.videoCallUserList,
      isLogin: state => state.user.isLogin,
      userID: state => state.videocall.userID,
      userSig: state => state.videocall.userSig,
      sdkAppId: state => state.videocall.sdkAppId
    }),
    videoClass(){
      switch(this.videoCallUserList.length){
        case 1:
          return 'one';
        case 2:
          return 'two';
        case 3:
        case 4:
          return 'four';
        case 5:
        case 6:
          return 'six';
        default:
          return 'nine'
      }
    }
  },
  methods:{
    async initTrtc(){
      let trtcRoomId = this.currentConversation.groupProfile.groupCustomField.find((obj) => {
          return obj.key === 'trtc_roomid';
      });
      const options = {
        userId: this.userID,
        userSig: this.userSig,
        roomId: trtcRoomId.value,
        sdkAppId: this.sdkAppId
      }
      this.Trtc = new RtcClient(options);
      this.Trtc.audienceJoin().then(()=>{
        this.isJoin = true;
      });
    },
    async publish(){
      await this.Trtc.createLocalStream({ audio: true, video: true }).then(() => { // 在进房之前，判断设备
        this.$store.commit('addedVideoCallUser','local');
        setTimeout(()=>{// 兼容群组聊天的场景，需要等div挂载成功后再播放
          this.Trtc.publishLocalStream().then(()=>{
            this.isPublish = true;
            this.isCamOn = true;
            this.isMicOn = true;
          });
        }, 1000);
      }).catch(() => {
        this.$store.commit('showMessage', { message: '请确认已连接摄像头和麦克风并授予其访问权限！' , type: 'error' });
      });
    },
    camHandler(){
      if(this.isCamOn){
        this.Trtc.muteLocalVideo();
      } else {
        this.Trtc.unmuteLocalVideo();
      }
      this.isCamOn = !this.isCamOn;
    },
    micHandler(){
      if(this.isMicOn){
        this.Trtc.muteLocalAudio();
      } else {
        this.Trtc.unmuteLocalAudio();
      }
      this.isMicOn = !this.isMicOn;
    },
    closeHandler(){
      this.$store.commit('removedVideoCallUser','local');
      this.Trtc.unpublish();
      this.isPublish = false;
      this.isCamOn = false;
      this.isMicOn = false;
    }
  }
}
</script>

<style scoped>
.avchatroom-item{
  height: 100%;
  display: flex;
  justify-content: center;
}
.avchatroom-item-wrapper{
  position: relative;
  max-width: 1440px;
  margin: 80px 80px 40px 80px;
}
.avchatroom-item-wrapper .el-main{
  padding: 0;
}
.chat-wrapper{
  position: relative;
  background-color: #f5f5f5;
}
.videocall-tips{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: white;
}
.chat-title{
  position: absolute;
  top: 0;
  left: 10px;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  /* css内阴影文字效果 */
  color: transparent;
  background-color : black;
  text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
  -webkit-background-clip : text;
}
.chat-content{
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 120px;
  border-top: 1px solid #e7e7e7;
  overflow: scroll;
}
.chat-send-box{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  border-top: 1px solid #e7e7e7;
}
.video-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
}
.video-userid{
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  z-index: 999;
}
.video-buttons{
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 40px;
  z-index: 999;
}
.video-buttons .el-button{
  width: 40px;
  height: 40px;
  margin: 10px;
}
.close-button{
  transform:rotate(134deg);
}
.publish-button{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  z-index: 999;
}
.one{
  position: relative;
  width: 100%;
  height: 100%;
}
.two{
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
}
.four{
  position: relative;
  float: left;
  width: 50%;
  height: 50%;
}
.six{
  position: relative;
  float: left;
  width: 33.3%;
  height: 50%;
}
.nine{
  position: relative;
  float: left;
  width: 33.3%;
  height: 33.3%;
}
</style>